"use client";

import { Card, CardContent } from "@/components/ui/card";
import Image from "next/image";
import Link from "next/link";

export interface VideoCardProps {
  id: string;
  title: string;
  thumbnailUrl: string;
  duration: string;
  viewCount: string;
  publisherName: string;
  publishDate?: string;
}

export default function VideoCard({
  id,
  title,
  thumbnailUrl,
  duration,
  viewCount,
  publisherName,
  publishDate,
}: VideoCardProps) {
  return (
    <Link href={`/video/${id}`}>
      <Card className="overflow-hidden border-none video-card">
        <div className="relative aspect-video">
          <Image
            src={thumbnailUrl}
            alt={title}
            fill
            className="object-cover transition-transform"
          />
          <span className="video-card-duration">{duration}</span>
        </div>
        <CardContent className="p-3">
          <h3 className="text-sm font-medium line-clamp-2 h-10">{title}</h3>
          <div className="flex items-center justify-between mt-2 text-xs text-gray-500">
            <span className="truncate">{publisherName}</span>
            <div className="flex items-center space-x-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="w-3 h-3"
              >
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                <circle cx="12" cy="12" r="3" />
              </svg>
              <span>{viewCount}</span>
            </div>
          </div>
          {publishDate && (
            <div className="mt-1 text-xs text-gray-500">{publishDate}</div>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}
